<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"/>
  <meta name="HandheldFriendly" content="true"/>
  <title>Stadtplan am aktuellen Ort</title>
  <script src="https://openlayers.org/api/2.12/OpenLayers.js"></script>
  <script src="https://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script src="https://overpass-api.de/overpass.js"></script>
  <script type="text/javascript">
      var lat = 53.86;
      var lon = 8.44;
      var zoom = 18;
      var located = false;
      var map;
      var current_query = "";

      var layerBoundaries = null;

      var customLayers = new Array();

      ZoomOutOSMFormat = OpenLayers.Class(OpenLayers.Format.OSM, {

          getNodes: function(doc)
          {
            var node_list = doc.getElementsByTagName("node");
            var nodes = {};
            for (var i = 0; i < node_list.length; i++)
            {
              var node = node_list[i];
              var id = node.getAttribute("id");
              nodes[id] = {
                'lat': node.getAttribute("lat"),
                'lon': node.getAttribute("lon"),
                'node': node
              };
            }

            if (node_list.length == 0)
              map.zoomOut();

            return nodes;
          },

          CLASS_NAME: "ZoomOutOSMFormat"
      });

      function make_auto_zoom_layer(data_url, color, zoom) {

          var styleMap = new OpenLayers.StyleMap({
              strokeColor: color,
              strokeOpacity: 0.5,
              strokeWidth: 6,
              pointRadius: 10,
              fillColor: color,
              fillOpacity: 0.25
          });
          var layer = new OpenLayers.Layer.Vector(color, {
              strategies: [new ZoomLimitedBBOXStrategy(zoom)],
              protocol: new OpenLayers.Protocol.HTTP({
                  url: data_url,
                  format: new ZoomOutOSMFormat()
              }),
              styleMap: styleMap,
              projection: new OpenLayers.Projection("EPSG:4326"),
              ratio: 1.0
          });

          layer.events.register("featuresadded", layer, make_features_added_closure(layer));

          return layer;
      }

      DetectBoundsOSMFormat = OpenLayers.Class(OpenLayers.Format.OSM, {

          min_lat: 180.0,
          max_lat: -180.0,
          min_lon: 90.0,
          max_lon: -90.0,
          zoom: 0,

          getNodes: function(doc)
          {
            var node_list = doc.getElementsByTagName("node");
            var nodes = {};
            for (var i = 0; i < node_list.length; i++)
            {
              var node = node_list[i];
              var id = node.getAttribute("id");
              nodes[id] = {
                'lat': node.getAttribute("lat"),
                'lon': node.getAttribute("lon"),
                'node': node
              };

              if (nodes[id].lat < this.min_lat)
                this.min_lat = nodes[id].lat;
              if (nodes[id].lat > this.max_lat)
                this.max_lat = nodes[id].lat;
              if (nodes[id].lon < this.min_lon)
                this.min_lon = nodes[id].lon;
              if (nodes[id].lon > this.max_lon)
                this.max_lon = nodes[id].lon;
            }

            if (this.min_lat == 180.0)
            {
                this.min_lat = 0;
                this.max_lat = 0;
            }
            if (this.min_lon == 90.0)
            {
                this.min_lon = 0;
                this.max_lon = 0;
            }

            return nodes;
          },

          CLASS_NAME: "DetectBoundsOSMFormat"
      });

      var osm_format = new DetectBoundsOSMFormat();

      function make_bbox_detect_closure() {
          return function(evt) {

              var lonLat = new OpenLayers.LonLat(
                  (Number(osm_format.min_lon) + Number(osm_format.max_lon))/2.0,
                  (Number(osm_format.min_lat) + Number(osm_format.max_lat))/2.0)
                  .transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

              var southwest = new OpenLayers.LonLat(
                  Number(osm_format.min_lon), Number(osm_format.min_lat))
                  .transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

              var northeast = new OpenLayers.LonLat(
                  Number(osm_format.max_lon), Number(osm_format.max_lat))
                  .transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

            map.setCenter(lonLat);

            var extent = map.getExtent();
            extent.extend(southwest);
            extent.extend(northeast);
            map.zoomToExtent(extent);
          };
      }

     var storedStatusText = "";

     function restoreStatusText() {
         setStatusText(storedStatusText);
     }

     function pushStatusText(text) {

	  var html_node = document.getElementById("statusline");
	  if (html_node != null)
	  {
            var div = html_node.firstChild;
            storedStatusText = div.nodeValue;
            div.deleteData(0, div.nodeValue.length);
            div.appendData(text);
	  }
     }

     function showMap(position) {
         setStatusText("Landkarte"/* um " + position.coords.latitude + "° Nord, " + position.coords.longitude + "° Ost"*/);
         var lonLat = new OpenLayers.LonLat(position.coords.longitude, position.coords.latitude).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
         var markers = new OpenLayers.Layer.Markers("Geolocation position");
         map.addLayer(markers);
         map.setCenter(lonLat, 16);
         markers.addMarker(new OpenLayers.Marker(lonLat));
     }


      function zShow(target) {
          document.getElementById("map").style.zIndex = "-1";
          document.getElementById("menu_search").style.zIndex = "-1";
          document.getElementById("element_details").style.zIndex = "-1";
          document.getElementById("menu_text").style.zIndex = "-1";

          document.getElementById(target).style.zIndex = "1";
      }


      function addMapBacklink(target_div) {
          var newElem = document.createElement("a");
          newElem.appendChild(document.createTextNode("zurück zur Karte"));
          newElem.href = "#";
          newElem.setAttribute("onclick", "restoreStatusText();zShow(\"map\")");
          target_div.appendChild(newElem);
          target_div.appendChild(document.createElement("br"));
          target_div.appendChild(document.createElement("br"));
      }


    function getIdentificatorString(osm_element)
    {
        if (osm_element.tags)
        {
            if (osm_element.tags.name)
                return osm_element.tags.name;
            else if (osm_element.tags.operator)
                return osm_element.tags.operator;
        }

        return null;
    }

    var nominatim_identfier = "email=overpass";

    function getPostalAdress(osm_element)
    {
        if (osm_element.tags)
        {
            if (osm_element.tags["addr:street"] && osm_element.tags["addr:housenumber"])
                return osm_element.tags["addr:street"] + " "
                    + osm_element.tags["addr:housenumber"];
            else if (osm_element.type && osm_element.id)
            {
                var type_letter = (osm_element.type == "node" ? "N"
                    : (osm_element.type == "way" ? "W" : "R"));
                var nominatim_req = OpenLayers.Request.GET({
                    url: "https://nominatim.openstreetmap.org/reverse?"
                        + nominatim_identfier + "&format=json"
                        + "&osm_type=" + type_letter + "&osm_id=" + osm_element.id,
                    async: false
                });
                var nominatim_result = JSON.parse(nominatim_req.responseText);

                var nominatim_road = "";
                if (nominatim_result.address && nominatim_result.address.road)
                    nominatim_road = nominatim_result.address.road;
                else if (nominatim_result.address && nominatim_result.address.pedestrian)
                    nominatim_road = nominatim_result.address.pedestrian;
                else if (nominatim_result.address && nominatim_result.address.footway)
                    nominatim_road = nominatim_result.address.footway;
                else if (nominatim_result.address && nominatim_result.address.cycleway)
                    nominatim_road = nominatim_result.address.cycleway;
                else if (nominatim_result.address && nominatim_result.address.path)
                    nominatim_road = nominatim_result.address.path;

                var nominatim_house_number = "";
                if (nominatim_result.address && nominatim_result.address.house_number)
                    nominatim_house_number = nominatim_result.address.house_number;

                return nominatim_road + " " + nominatim_house_number;
            }
        }
    }


     Click = OpenLayers.Class(OpenLayers.Control, {

        genericUrl: "",
	tolerance: 0.0,
	map: "",

	defaultHandlerOptions: {
	  'single': true,
	  'double': false,
	  'pixelTolerance': 0,
	  'stopSingle': false,
	  'stopDouble': false
	},

	initialize: function(url, tolerance, map) {
	  this.genericUrl = url;
	  this.tolerance = tolerance;
	  this.map = map;

	  this.handlerOptions = OpenLayers.Util.extend(
	    {}, this.defaultHandlerOptions
	  );
	  OpenLayers.Control.prototype.initialize.apply(
	    this, arguments
	  );
	  this.handler = new OpenLayers.Handler.Click(
	    this, {
	      'click': this.trigger
	    }, this.handlerOptions
	  );
	  this.handler.pixelTolerance = 20;
	},

	trigger: function(evt) {
	  var lonlat = map.getLonLatFromPixel(evt.xy)
	      .transform(new OpenLayers.Projection("EPSG:900913"),
		         new OpenLayers.Projection("EPSG:4326"));

          pushStatusText("Details");
	  zShow("element_details");

	  var rel_tolerance = this.tolerance * map.getScale();

          var request = OpenLayers.Request.GET({
              url: this.genericUrl + current_query + "out qt;&bbox="
                  + (lonlat.lon - rel_tolerance) + "," + (lonlat.lat - rel_tolerance) + ","
                  + (lonlat.lon + rel_tolerance) + "," + (lonlat.lat + rel_tolerance),
              async: false
          });

          var result = JSON.parse(request.responseText);
          var target_div = document.getElementById("element_details");
          while (target_div.hasChildNodes())
            target_div.removeChild(target_div.firstChild);
          target_div.style.overflow = "hidden";

          addMapBacklink(target_div);

          for (var i = 0; i < result.elements.length; i++)
          {
            var name_detected = false;
            var address_detected = false;

            if (result.elements[i].tags)
            {
              identificator = getIdentificatorString(result.elements[i]);
              if (identificator)
              {
                name_detected = true;
                var newElem = document.createElement("strong");
                newElem.appendChild(document.createTextNode(identificator));
                target_div.appendChild(newElem);
                target_div.appendChild(document.createElement("br"));
              }

              address = getPostalAdress(result.elements[i]);
              if (address)
              {
                address_detected = true;
                var newElem = document.createElement("em");
                newElem.appendChild(document.createTextNode(address));
                target_div.appendChild(newElem);
                target_div.appendChild(document.createElement("br"));
              }

              if (!name_detected || !address_detected)
              {
                  for (var key in result.elements[i].tags)
                  {
                    if (key.substr(0,4) != "addr")
                    {
                        target_div.appendChild(document.createTextNode(key + " = " + result.elements[i].tags[key]));
                        target_div.appendChild(document.createElement("br"));
                    }
                  }
              }
              target_div.appendChild(document.createElement("br"));
            }
          }

          target_div.style.overflow = "scroll";
	}

      });

     function init(){

          map = new OpenLayers.Map ("map", {
          controls:[
              new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.LayerSwitcher(),
              new OpenLayers.Control.Attribution()],
              maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
              maxResolution: 156543.0399,
              numZoomLevels: 19,
              units: 'm',
              projection: new OpenLayers.Projection("EPSG:900913"),
              displayProjection: new OpenLayers.Projection("EPSG:4326")
          } );

          //layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
          layerMapnik = new OpenLayers.Layer.OSM("Mapnik",
              ["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
               "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
               "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"]);
          map.addLayer(layerMapnik);
          layerDe = new OpenLayers.Layer.OSM("OSM_de",
              ["https://a.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
               "https://b.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
               "https://c.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
               "https://d.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png"]);
          map.addLayer(layerDe);
          layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
          map.addLayer(layerCycleMap);

          var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

          //Initialise the vector layer using OpenLayers.Format.OSM
          var styleMap = new OpenLayers.StyleMap({
              strokeColor: "blue",
              strokeOpacity: 0.5,
              strokeWidth: 6,
              pointRadius: 10,
              fillColor: "blue",
              fillOpacity: 0.25
          });

          map.setCenter(lonLat, zoom);

          // Try W3C Geolocation
          if (!located)
          {
              if (navigator.geolocation)
                  navigator.geolocation.getCurrentPosition(showMap,
                      function(position_error) {
                          alert(position_error.message);
                      },
                      {
                          enableHighAccuracy: true
                      });
              else
                  alert("The W3C Geolocation API isn't availble.");
          }

          var click = new Click("https://overpass-api.de/api/interpreter?data=[timeout:3][out:json];", 0.0000001, map);
          map.addControl(click);
          click.activate();
      }


      function hideCustomLayers() {
          for (var i = 0; i < customLayers.length; ++i)
              map.removeLayer(customLayers[i]);//customLayers[i].display(false);
          customLayers = new Array();
      }

      function showBoundaries() {
          hideCustomLayers();
      }

      function showCustomLayer(query)
      {
          hideCustomLayers();
          var layer = make_auto_zoom_layer("https://overpass-api.de/api/interpreter?data=" + query + "out+skel;", "blue", 11);
          map.addLayers([layer]);
          customLayers.push(layer);
          layer.display(true);
      }

      function showQueryLayer(conjunctions, desc)
      {
          setStatusText("Suche nach " + desc);
          var query = "(";
          for (var i = 0; i < conjunctions.length; i++)
            query = query + "way" + conjunctions[i] + "(bbox);>;node" + conjunctions[i] + "(bbox);";
          query = query + ");";
          showCustomLayer(query);

          current_query = "(";
          for (var i = 0; i < conjunctions.length; i++)
            current_query = current_query + "way" + conjunctions[i] + "(bbox);node" + conjunctions[i] + "(bbox);";
          current_query = current_query + ");";
      }

      function showNameQueryLayer(query_value_user)
      {
          var query_value = "";
          for (var i = 0; i < query_value_user.length; ++i)
          {
              if (query_value_user[i] >= 'A' && query_value_user[i] <= 'Z')
                  query_value += query_value_user[i];
              else if (query_value_user[i] >= 'a' && query_value_user[i] <= 'z')
                  query_value += query_value_user[i];
              else if (query_value_user[i] >= '0' && query_value_user[i] <= '9')
                  query_value += query_value_user[i];
              else
                  query_value += ".{1,4}";
          }

          setStatusText("Suche nach " + query_value);
          showCustomLayer("(node[name~\"" + query_value + "\",i](bbox);way[name~\"" + query_value + "\",i](bbox);>;rel[name~\"" + query_value + "\",i](bbox);>;);");
          current_query = "(node[name~\"" + query_value + "\",i](bbox);way[name~\"" + query_value + "\",i](bbox);rel[name~\"" + query_value + "\",i](bbox););";
      }

      var queryLayers = {
          "ATM": ["[amenity=atm]", "[amenity=bank][atm!=no]"],
          "Sparkasse": ["[amenity=atm][name~\"[sS]parkasse\"]", "[amenity=bank][atm!=no][name~\"[sS]parkasse\"]", "[amenity=atm][operator~\"[sS]parkasse\"]", "[amenity=bank][atm!=no][operator~\"[sS]parkasse\"]"],
          "Postbank": ["[amenity=atm][name~\"Deutsche Bank\"]", "[amenity=bank][atm!=no][name~\"Deutsche Bank\"]", "[amenity=atm][name~\"Commerzbank\"]", "[amenity=bank][atm!=no][name~\"Commerzbank\"]", "[amenity=atm][name~\"Postbank\"]", "[amenity=bank][atm!=no][name~\"Postbank\"]", "[amenity=atm][operator~\"Deutsche Bank\"]", "[amenity=bank][atm!=no][operator~\"Deutsche Bank\"]", "[amenity=atm][operator~\"Commerzbank\"]", "[amenity=bank][atm!=no][operator~\"Commerzbank\"]", "[amenity=atm][operator~\"Postbank\"]", "[amenity=bank][atm!=no][operator~\"Postbank\"]"],
          "Volksbank": ["[amenity=atm][name~'[vV]olksbank']", "[amenity=bank][atm!=no][name~'[vV]olksbank']", "[amenity=atm][name~'Raiffeisenbank']", "[amenity=bank][atm!=no][name~'Raiffeisenbank']", "[amenity=atm][name~'Kölner Bank']", "[amenity=bank][atm!=no][name~'Kölner Bank']", "[amenity=atm][operator~'[vV]olksbank']", "[amenity=bank][atm!=no][operator~'[vV]olksbank']", "[amenity=atm][operator~'Raiffeisenbank']", "[amenity=bank][atm!=no][operator~'Raiffeisenbank']", "[amenity=atm][operator~'Kölner Bank']", "[amenity=bank][atm!=no][operator~'Kölner Bank']"],
          "Sparda": ["[amenity=atm][name~'Sparda']", "[amenity=bank][atm!=no][name~'Sparda']", "[amenity=atm][name~'Targo']", "[amenity=bank][atm!=no][name~'Targo']", "[amenity=atm][name~'Santander']", "[amenity=bank][atm!=no][name~'Santander']", "[amenity=atm][name~'BB ?Bank']", "[amenity=bank][atm!=no][name~'BB ?Bank']", "[amenity=atm][name~'National-Bank']", "[amenity=bank][atm!=no][name~'National-Bank']", "[amenity=atm][operator~'Sparda']", "[amenity=bank][atm!=no][operator~'Sparda']", "[amenity=atm][operator~'Targo']", "[amenity=bank][atm!=no][operator~'Targo']", "[amenity=atm][operator~'Santander']", "[amenity=bank][atm!=no][operator~'Santander']", "[amenity=atm][operator~'BB ?Bank']", "[amenity=bank][atm!=no][operator~'BB ?Bank']", "[amenity=atm][operator~'National-Bank']", "[amenity=bank][atm!=no][operator~'National-Bank']"],

          "Postbox": ["[amenity=post_box]"],
          "Gasstation": ["[amenity=fuel]"],
          "WC": ["[amenity=toilets]"],

          "Parcels": ["[amenity=post_office]","[amenity=vending_machine][vending~'parcel_pickup'][operator=DHL]","[amenity=post_office][operator=Hermes]"],
          "Post": ["[amenity=post_office]"],
          "DHL": ["[amenity=vending_machine][vending~'parcel_pickup'][operator=DHL]"],
          "Hermes": ["[amenity=post_office][operator=Hermes]"],

          "Foodsource": ["[shop=supermarket]", "[shop=convenience]"],
          "Chemist": ["[shop=chemist]"],
          "Pharmacy": ["[amenity=pharmacy]"],
          "Kiosk": ["[shop=kiosk]", "[shop=newsagent]"],
          "Bookstore": ["[shop=books]"],
          "Flowers": ["[shop=florist]"],

          "Baker": ["[shop=bakery]"],
          "Cafe": ["[amenity=cafe]"],
          "IceCafe": ["[cuisine=ice_cream]"],
          "Restaurant": ["[amenity=restaurant]"],
          "Regional": ["[amenity=restaurant][cuisine=regional]", "[amenity=restaurant][cuisine=german]"],
          "Italian": ["[amenity=restaurant][cuisine=italian]"],
          "Greek": ["[amenity=restaurant][cuisine=greek]"],
          "Chinese": ["[amenity=restaurant][cuisine=chinese]"],
          "Spain": ["[amenity=restaurant][cuisine=spanish]", "[amenity=restaurant][cuisine=mexican]"],
          "OtherRestaurant": ["[amenity=restaurant][cuisine!~'regional|german|italian|greek|chinese|spanish|mexican']"],
          "Pub": ["[amenity=pub]"],
          "Fastfood": ["[amenity=fast_food]"]
      };

      function addPOILayerChoice(layer_id, desc) {
          var target_div = document.getElementById("menu_text");
          var newElem = document.createElement("a");
          newElem.appendChild(document.createTextNode(desc));
          newElem.href = "#";
          newElem.setAttribute("onclick", "clearChoiceMenu();zShow(\"map\");showQueryLayer(queryLayers[\"" + layer_id + "\"], \"" + desc + "\")");
          target_div.appendChild(newElem);
          target_div.appendChild(document.createElement("br"));
          target_div.appendChild(document.createElement("br"));
      }

      function addPOIFolder(folder_id, desc) {
          var target_div = document.getElementById("menu_text");
          var newElem = document.createElement("a");
          newElem.appendChild(document.createTextNode(desc));
          newElem.href = "#";
          newElem.setAttribute("onclick", "prepare" + folder_id + "Menu();zShow(\"menu_text\")");
          target_div.appendChild(newElem);
          target_div.appendChild(document.createElement("br"));
          target_div.appendChild(document.createElement("br"));
      }

      function populateSearchForm() {
          var target_div = document.getElementById("menu_search");

          var form = document.createElement("form");
          form.action = "#";
          form.acceptCharset = "UTF-8";
          form.setAttribute("onsubmit", "zShow(\"map\");showNameQueryLayer(document.getElementById(\"input_search\").value); clearChoiceMenu();return false");

          var input = document.createElement("input");
          input.type = "text";
          input.id = "input_search";
          form.appendChild(input);

          input = document.createElement("input");
          input.type = "submit";
          input.value = "Suchen";
          form.appendChild(input);

          target_div.appendChild(form);
      }

      function clearChoiceMenu()
      {
          var target_div = document.getElementById("menu_text");
          while (target_div.hasChildNodes())
            target_div.removeChild(target_div.firstChild);
          target_div = document.getElementById("menu_search");
          while (target_div.hasChildNodes())
            target_div.removeChild(target_div.firstChild);
      }

      function prepareStartMenu() {
          clearChoiceMenu();
          addMapBacklink(document.getElementById("menu_text"));
          addPOIFolder("Service", "Service");
          addPOIFolder("Shopping", "Einkaufen");
          addPOIFolder("Food", "Essen");
      }

      function prepareServiceMenu() {
          clearChoiceMenu();
          addPOIFolder("Start", "zurück");
          addPOIFolder("ATM", "Geldautomat");
          addPOIFolder("Parcels", "Paket-Service");
          addPOILayerChoice("Postbox", "Briefkasten");
          addPOILayerChoice("Gasstation", "Tankstelle");
          addPOILayerChoice("WC", "WC");
      }

      function prepareATMMenu() {
          clearChoiceMenu();
          addPOIFolder("Service", "zurück");
          addPOILayerChoice("ATM", "alle");
          addPOILayerChoice("Sparkasse", "Sparkasse");
          addPOILayerChoice("Postbank", "Cash Group");
          addPOILayerChoice("Volksbank", "Volksbank");
          addPOILayerChoice("Sparda", "Cash Pool");
      }

      function prepareParcelsMenu() {
          clearChoiceMenu();
          addPOIFolder("Service", "zurück");
          addPOILayerChoice("Parcels", "alle");
          addPOILayerChoice("Post", "Postamt oder -agentur");
          addPOILayerChoice("DHL", "Packstation");
          addPOILayerChoice("Hermes", "Hermes");
      }

      function prepareShoppingMenu() {
          clearChoiceMenu();
          addPOIFolder("Start", "zurück");
          addPOILayerChoice("Foodsource", "Lebensmittel");
          addPOILayerChoice("Chemist", "Drogerie");
          addPOILayerChoice("Pharmacy", "Apotheke");
          addPOILayerChoice("Kiosk", "Zeitschriften");
          addPOILayerChoice("Bookstore", "Bücher");
          addPOILayerChoice("Flowers", "Blumen");
      }

      function prepareFoodMenu() {
          clearChoiceMenu();
          addPOIFolder("Start", "zurück");
          addPOILayerChoice("Baker", "Bäcker");
          addPOILayerChoice("Cafe", "Café");
          addPOILayerChoice("IceCafe", "Eisdiele");
          addPOIFolder("Restaurant", "Restaurant");
          addPOILayerChoice("Pub", "Kneipe");
          addPOILayerChoice("Fastfood", "Fastfood");
      }

      function prepareRestaurantMenu() {
          clearChoiceMenu();
          addPOIFolder("Food", "zurück");
          addPOILayerChoice("Restaurant", "Alle");
          addPOILayerChoice("Regional", "gutbürgerlich");
          addPOILayerChoice("Italian", "italienisch");
          addPOILayerChoice("Greek", "griechisch");
          addPOILayerChoice("Chinese", "chinesisch");
          addPOILayerChoice("Spain", "spanisch");
          addPOILayerChoice("OtherRestaurant", "sonstige");
      }

  </script>
</head>
<body onload="init()">
  <div id="statusline" style="min-height:10%; font-family:sans-serif; font-size:16pt; font-weight:bold">Landkarte</div>

  <div id="menu" style="height:10%; width:100%; font-family:sans-serif; font-size:16pt; position:absolute; top:90%; left:0%; text-align:center">
    <div style="background-color:blue; width:24%; float:left; margin-right:1%"><a href="#" onclick="zShow(&quot;map&quot;);map.zoomIn()"><img src="/plus.png" alt="zoom in" height="100%"/></a></div>
    <div style="background-color:blue; width:24%; float:left; margin-right:1%"><a href="#" onclick="zShow(&quot;map&quot;);map.zoomOut()"><img src="/minus.png" alt="zoom out" height="100%"/></a></div>
    <div style="background-color:blue; width:24%; float:left; margin-right:1%"><a href="#" onclick="zShow(&quot;menu_search&quot;);populateSearchForm()"><img src="/search.png" alt="search" height="100%"/></a></div>
    <div style="background-color:blue; width:24%; float:left; margin-right:1%"><a href="#" onclick="zShow(&quot;menu_text&quot;);prepareStartMenu()"><img src="/find.png" alt="find" height="100%"/></a></div>
  </div>

  <div id="map" class="smallmap" style="position:absolute; top:10%; left:0%; height:80%; width:100%; z-index:1"></div>

  <div id="menu_search" style="font-size:16pt; position:absolute; top:10%; left:0%; height:80%; width:100%; z-index:-1; background-color:white">
    &nbsp;
  </div>

  <div id="element_details" style="font-size:16pt; position:absolute; top:10%; left:0%; height:80%; width:100%; z-index:-1; overflow:scroll; background-color:white">
    &nbsp;
  </div>

  <div id="menu_text" style="font-size:16pt; position:absolute; top:10%; left:0%; height:80%; width:100%; z-index:-1; background-color:white"/>

  <!--
    Standort verschieben
    Position Attribution
    Status im Titel
    Hamming-Abstand
    Symbole als Marker
    editierbar
  -->

</body>
</html>
